حالت هم‌زمان (Concurrent Mode) در React: ابهام‌زدایی از رندرینگ قابل‌وقفه برای بهبود تجربه کاربری

حالت هم‌زمان React یک تغییر قابل توجه در نحوه رندر کردن برنامه‌های React را نشان می‌دهد و مفهوم رندرینگ قابل‌وقفه را معرفی می‌کند. این موضوع اساساً نحوه مدیریت به‌روزرسانی‌ها توسط React را تغییر می‌دهد و به آن اجازه می‌دهد تا وظایف فوری را در اولویت قرار دهد و رابط کاربری را حتی تحت بار سنگین، پاسخگو نگه دارد. این پست وبلاگ به بررسی پیچیدگی‌های حالت هم‌زمان، اصول اصلی آن، جزئیات پیاده‌سازی و مزایای عملی آن برای ساخت برنامه‌های وب با کارایی بالا برای مخاطبان جهانی می‌پردازد.

درک نیاز به حالت هم‌زمان

به طور سنتی، React در حالتی کار می‌کرد که اکنون به عنوان حالت قدیمی (Legacy Mode) یا حالت مسدودکننده (Blocking Mode) شناخته می‌شود. در این حالت، هنگامی که React شروع به رندر یک به‌روزرسانی می‌کند، به صورت همگام و بدون وقفه تا پایان رندرینگ ادامه می‌دهد. این امر می‌تواند منجر به مشکلات عملکردی شود، به ویژه هنگام کار با کامپوننت‌های پیچیده یا مجموعه داده‌های بزرگ. در طول یک رندر طولانی و همگام، مرورگر پاسخگو نیست که منجر به تاخیر محسوس و تجربه کاربری ضعیف می‌شود. تصور کنید کاربری در حال تعامل با یک وب‌سایت تجارت الکترونیک است و سعی در فیلتر کردن محصولات دارد و با هر تعامل، تاخیرهای قابل توجهی را تجربه می‌کند. این می‌تواند بسیار خسته‌کننده باشد و منجر به ترک سایت توسط کاربران شود.

حالت هم‌زمان این محدودیت را با قادر ساختن React به شکستن کار رندرینگ به واحدهای کوچکتر و قابل‌وقفه برطرف می‌کند. این به React اجازه می‌دهد تا وظایف رندرینگ را بر اساس اولویت متوقف، از سر بگیرد یا حتی رها کند. به‌روزرسانی‌های با اولویت بالا، مانند ورودی کاربر، می‌توانند رندرهای در حال انجام با اولویت پایین را قطع کنند و از یک تجربه کاربری روان و پاسخگو اطمینان حاصل کنند.

مفاهیم کلیدی حالت هم‌زمان

۱. رندرینگ قابل‌وقفه

اصل اصلی حالت هم‌زمان، توانایی قطع کردن رندرینگ است. به جای مسدود کردن نخ اصلی (main thread)، React می‌تواند رندر کردن یک درخت کامپوننت را متوقف کند تا به وظایف فوری‌تر، مانند پاسخ به ورودی کاربر، رسیدگی کند. این کار از طریق تکنیکی به نام زمان‌بندی مشارکتی (cooperative scheduling) انجام می‌شود. React پس از انجام مقدار معینی کار، کنترل را به مرورگر باز می‌گرداند و به مرورگر اجازه می‌دهد رویدادهای دیگر را مدیریت کند.

۲. اولویت‌ها

React به انواع مختلف به‌روزرسانی‌ها اولویت‌هایی را اختصاص می‌دهد. تعاملات کاربر، مانند تایپ کردن یا کلیک کردن، معمولاً اولویت بالاتری نسبت به به‌روزرسانی‌های پس‌زمینه یا تغییرات کمتر حیاتی UI دارند. این تضمین می‌کند که مهم‌ترین به‌روزرسانی‌ها ابتدا پردازش شوند و منجر به تجربه کاربری پاسخگوتری شوند. به عنوان مثال، تایپ کردن در یک نوار جستجو باید همیشه فوری احساس شود، حتی اگر فرآیندهای پس‌زمینه دیگری در حال به‌روزرسانی کاتالوگ محصولات باشند.

۳. معماری فایبر (Fiber)

حالت هم‌زمان بر روی React Fiber ساخته شده است، که بازنویسی کاملی از معماری داخلی React است. Fiber هر کامپوننت را به عنوان یک گره فایبر (fiber node) نشان می‌دهد و به React اجازه می‌دهد کار مورد نیاز برای به‌روزرسانی کامپوننت را ردیابی کرده و آن را بر این اساس اولویت‌بندی کند. Fiber React را قادر می‌سازد تا به‌روزرسانی‌های بزرگ را به واحدهای کاری کوچکتر تقسیم کند و رندرینگ قابل‌وقفه را ممکن سازد. فایبر را به عنوان یک مدیر وظیفه دقیق برای React در نظر بگیرید که به آن اجازه می‌دهد وظایف مختلف رندرینگ را به طور موثر زمان‌بندی و اولویت‌بندی کند.

۴. رندرینگ ناهمگام (Asynchronous Rendering)

حالت هم‌زمان تکنیک‌های رندرینگ ناهمگام را معرفی می‌کند. React می‌تواند رندر یک به‌روزرسانی را شروع کرده و سپس آن را برای انجام کارهای دیگر متوقف کند. هنگامی که مرورگر بیکار است، React می‌تواند رندرینگ را از جایی که متوقف شده بود از سر بگیرد. این به React اجازه می‌دهد تا از زمان بیکاری به طور موثر استفاده کند و عملکرد کلی را بهبود بخشد. به عنوان مثال، React ممکن است صفحه بعدی را در یک برنامه چند صفحه‌ای پیش‌رندر کند در حالی که کاربر هنوز در حال تعامل با صفحه فعلی است، که یک تجربه ناوبری یکپارچه را فراهم می‌کند.

۵. Suspense

Suspense یک کامپوننت داخلی است که به شما امکان می‌دهد رندرینگ را در حین انتظار برای عملیات ناهمگام، مانند واکشی داده، «تعلیق» کنید. به جای نمایش یک صفحه خالی یا یک اسپینر، Suspense می‌تواند یک UI جایگزین (fallback) را در حین بارگذاری داده‌ها نمایش دهد. این کار با ارائه بازخورد بصری و جلوگیری از احساس عدم پاسخگویی UI، تجربه کاربری را بهبود می‌بخشد. یک فید رسانه اجتماعی را تصور کنید: Suspense می‌تواند یک مکان‌نما برای هر پست نمایش دهد در حالی که محتوای واقعی از سرور در حال واکشی است.

۶. Transitions

Transitions به شما امکان می‌دهد به‌روزرسانی‌ها را به عنوان غیرفوری علامت‌گذاری کنید. این به React می‌گوید که به‌روزرسانی‌های دیگر، مانند ورودی کاربر، را بر transition اولویت دهد. Transitions برای ایجاد انتقال‌های روان و جذاب بصری بدون قربانی کردن پاسخگویی مفید هستند. به عنوان مثال، هنگام پیمایش بین صفحات در یک برنامه وب، می‌توانید انتقال صفحه را به عنوان یک transition علامت‌گذاری کنید تا React بتواند تعاملات کاربر در صفحه جدید را در اولویت قرار دهد.

مزایای استفاده از حالت هم‌زمان

• پاسخگویی بهبود یافته: با اجازه دادن به React برای قطع رندرینگ و اولویت‌بندی وظایف فوری، حالت هم‌زمان به طور قابل توجهی پاسخگویی برنامه شما را، به ویژه تحت بار سنگین، بهبود می‌بخشد. این منجر به تجربه کاربری روان‌تر و لذت‌بخش‌تری می‌شود.
• تجربه کاربری پیشرفته: استفاده از Suspense و Transitions به شما امکان می‌دهد رابط‌های کاربری جذاب‌تر و کاربرپسندتری ایجاد کنید. کاربران بازخورد فوری برای اقدامات خود می‌بینند، حتی هنگام کار با عملیات ناهمگام.
• عملکرد بهتر: حالت هم‌زمان به React اجازه می‌دهد تا از زمان بیکاری به طور موثرتری استفاده کند و عملکرد کلی را بهبود بخشد. با تقسیم به‌روزرسانی‌های بزرگ به واحدهای کاری کوچکتر، React می‌تواند از مسدود کردن نخ اصلی جلوگیری کرده و UI را پاسخگو نگه دارد.
• تقسیم کد (Code Splitting) و بارگذاری تنبل (Lazy Loading): حالت هم‌زمان به طور یکپارچه با تقسیم کد و بارگذاری تنبل کار می‌کند و به شما امکان می‌دهد فقط کدی را که برای نمای فعلی مورد نیاز است بارگذاری کنید. این می‌تواند زمان بارگذاری اولیه برنامه شما را به طور قابل توجهی کاهش دهد.
• کامپوننت‌های سرور (آینده): حالت هم‌زمان یک پیش‌نیاز برای کامپوننت‌های سرور است، یک ویژگی جدید که به شما امکان می‌دهد کامپوننت‌ها را روی سرور رندر کنید. کامپوننت‌های سرور می‌توانند با کاهش مقدار جاوا اسکریپتی که باید در کلاینت دانلود و اجرا شود، عملکرد را بهبود بخشند.

پیاده‌سازی حالت هم‌زمان در برنامه React شما

فعال کردن حالت هم‌زمان در برنامه React شما نسبتاً ساده است. این فرآیند بستگی به این دارد که آیا از Create React App استفاده می‌کنید یا یک تنظیمات ساخت سفارشی.

استفاده از Create React App

اگر از Create React App استفاده می‌کنید، می‌توانید حالت هم‌زمان را با به‌روزرسانی فایل `index.js` خود برای استفاده از API `createRoot` به جای API `ReactDOM.render` فعال کنید.

// قبل:
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

// بعد:
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

استفاده از تنظیمات ساخت سفارشی

اگر از یک تنظیمات ساخت سفارشی استفاده می‌کنید، باید اطمینان حاصل کنید که از React 18 یا بالاتر استفاده می‌کنید و پیکربندی ساخت شما از حالت هم‌زمان پشتیبانی می‌کند. همچنین باید فایل `index.js` خود را برای استفاده از API `createRoot` به‌روز کنید، همانطور که در بالا نشان داده شده است.

استفاده از Suspense برای واکشی داده

برای بهره‌مندی کامل از حالت هم‌زمان، باید از Suspense برای واکشی داده استفاده کنید. این به شما امکان می‌دهد تا یک UI جایگزین را در حین بارگذاری داده‌ها نمایش دهید و از احساس عدم پاسخگویی UI جلوگیری کنید.

در اینجا مثالی از استفاده از Suspense با یک تابع فرضی `fetchData` آورده شده است:

import { Suspense } from 'react';

function MyComponent() {
 const data = fetchData(); // فرض کنید fetchData() یک شیء شبه-Promise برمی‌گرداند
 return (
  <div>
   <h1>{data.title}</h1>
   <p>{data.description}</p>
  </div>
 );
}

function App() {
 return (
  <Suspense fallback={<div>در حال بارگذاری...</div>}>
   <MyComponent />
  </Suspense>
 );
}

export default App;

در این مثال، کامپوننت `MyComponent` سعی می‌کند داده‌ها را از تابع `fetchData` بخواند. اگر داده‌ها هنوز در دسترس نباشند، کامپوننت رندرینگ را «تعلیق» می‌کند و کامپوننت `Suspense` UI جایگزین را نمایش می‌دهد (در این مورد، «در حال بارگذاری...»). هنگامی که داده‌ها در دسترس باشند، کامپوننت رندرینگ را از سر می‌گیرد.

استفاده از Transitions برای به‌روزرسانی‌های غیرفوری

از Transitions برای علامت‌گذاری به‌روزرسانی‌هایی که فوری نیستند استفاده کنید. این به React اجازه می‌دهد تا ورودی کاربر و سایر وظایف مهم را در اولویت قرار دهد. می‌توانید از هوک `useTransition` برای ایجاد transitionها استفاده کنید.

import { useState, useTransition } from 'react';

function MyComponent() {
 const [isPending, startTransition] = useTransition();
 const [value, setValue] = useState('');

 const handleChange = (e) => {
  startTransition(() => {
   setValue(e.target.value);
  });
 };

 return (
  <div>
   <input type="text" onChange={handleChange} />
   <p>مقدار: {value}</p>
   {isPending && <p>در حال به‌روزرسانی...</p>}
  </div>
 );
}

export default MyComponent;

در این مثال، تابع `handleChange` از `startTransition` برای به‌روزرسانی حالت `value` استفاده می‌کند. این به React می‌گوید که این به‌روزرسانی فوری نیست و در صورت لزوم می‌تواند از اولویت آن کاسته شود. حالت `isPending` نشان می‌دهد که آیا یک transition در حال حاضر در حال انجام است یا خیر.

مثال‌های عملی و موارد استفاده

حالت هم‌زمان به ویژه در برنامه‌هایی با موارد زیر مفید است:

• رابط‌های کاربری پیچیده: برنامه‌هایی با عناصر تعاملی زیاد و به‌روزرسانی‌های مکرر می‌توانند از پاسخگویی بهبود یافته حالت هم‌زمان بهره‌مند شوند.
• عملیات‌های سنگین داده: برنامه‌هایی که مقادیر زیادی داده را واکشی می‌کنند یا محاسبات پیچیده‌ای انجام می‌دهند، می‌توانند از Suspense و Transitions برای ارائه یک تجربه کاربری روان‌تر استفاده کنند.
• به‌روزرسانی‌های بی‌درنگ (Real-Time): برنامه‌هایی که به به‌روزرسانی‌های بی‌درنگ نیاز دارند، مانند برنامه‌های چت یا تیکرهای سهام، می‌توانند از حالت هم‌زمان برای اطمینان از نمایش سریع به‌روزرسانی‌ها استفاده کنند.

مثال ۱: فیلتر کردن محصولات در تجارت الکترونیک

یک وب‌سایت تجارت الکترونیک با هزاران محصول را تصور کنید. هنگامی که یک کاربر فیلترها را اعمال می‌کند (به عنوان مثال، محدوده قیمت، برند، رنگ)، برنامه باید لیست محصولات را دوباره رندر کند. در حالت قدیمی، این می‌توانست منجر به تاخیر قابل توجهی شود. با حالت هم‌زمان، عملیات فیلتر کردن می‌تواند به عنوان یک transition علامت‌گذاری شود، که به React اجازه می‌دهد ورودی کاربر را در اولویت قرار دهد و UI را پاسخگو نگه دارد. از Suspense می‌توان برای نمایش یک نشانگر بارگذاری در حین واکشی محصولات فیلتر شده از سرور استفاده کرد.

مثال ۲: تجسم داده‌های تعاملی

یک برنامه تجسم داده را در نظر بگیرید که یک نمودار پیچیده با هزاران نقطه داده را نمایش می‌دهد. هنگامی که کاربر روی نمودار زوم می‌کند یا آن را جابجا می‌کند، برنامه باید نمودار را با داده‌های به‌روز شده دوباره رندر کند. با حالت هم‌زمان، عملیات زوم و جابجایی می‌توانند به عنوان transition علامت‌گذاری شوند، که به React اجازه می‌دهد ورودی کاربر را در اولویت قرار دهد و یک تجربه روان و تعاملی را فراهم کند. از Suspense می‌توان برای نمایش یک مکان‌نما در حین رندر مجدد نمودار استفاده کرد.

مثال ۳: ویرایش اسناد مشترک

در یک برنامه ویرایش اسناد مشترک، چندین کاربر می‌توانند به طور همزمان یک سند را ویرایش کنند. این امر به به‌روزرسانی‌های بی‌درنگ نیاز دارد تا اطمینان حاصل شود که همه کاربران آخرین تغییرات را می‌بینند. با حالت هم‌زمان، به‌روزرسانی‌ها می‌توانند بر اساس فوریت خود اولویت‌بندی شوند، و اطمینان حاصل شود که ورودی کاربر همیشه پاسخگو است و سایر به‌روزرسانی‌ها به سرعت نمایش داده می‌شوند. از Transitions می‌توان برای روان کردن انتقال‌ها بین نسخه‌های مختلف سند استفاده کرد.

چالش‌های رایج و راه‌حل‌ها

۱. سازگاری با کتابخانه‌های موجود

برخی از کتابخانه‌های موجود React ممکن است به طور کامل با حالت هم‌زمان سازگار نباشند. این می‌تواند منجر به رفتار غیرمنتظره یا خطا شود. برای حل این مشکل، باید سعی کنید از کتابخانه‌هایی استفاده کنید که به طور خاص برای حالت هم‌زمان طراحی شده‌اند یا برای پشتیبانی از آن به‌روز شده‌اند. همچنین می‌توانید از هوک `useDeferredValue` برای انتقال تدریجی به حالت هم‌زمان استفاده کنید.

۲. دیباگ کردن و پروفایلینگ

دیباگ کردن و پروفایلینگ برنامه‌های حالت هم‌زمان می‌تواند چالش‌برانگیزتر از دیباگ کردن و پروفایلینگ برنامه‌های حالت قدیمی باشد. این به این دلیل است که حالت هم‌زمان مفاهیم جدیدی مانند رندرینگ قابل‌وقفه و اولویت‌ها را معرفی می‌کند. برای حل این مشکل، می‌توانید از React DevTools Profiler برای تجزیه و تحلیل عملکرد برنامه خود و شناسایی گلوگاه‌های بالقوه استفاده کنید.

۳. استراتژی‌های واکشی داده

واکشی داده موثر برای عملکرد بهینه در حالت هم‌زمان بسیار مهم است. از واکشی مستقیم داده‌ها در داخل کامپوننت‌ها بدون استفاده از Suspense خودداری کنید. در عوض، هر زمان که ممکن است داده‌ها را پیش‌واکشی کنید و از Suspense برای مدیریت حالت‌های بارگذاری به شیوه‌ای زیبا استفاده کنید. استفاده از کتابخانه‌هایی مانند SWR یا React Query را که برای کار یکپارچه با Suspense طراحی شده‌اند، در نظر بگیرید.

۴. رندرهای مجدد غیرمنتظره

به دلیل ماهیت قابل‌وقفه حالت هم‌زمان، کامپوننت‌ها ممکن است بیشتر از حالت قدیمی دوباره رندر شوند. در حالی که این اغلب برای پاسخگویی مفید است، اما اگر با دقت مدیریت نشود، گاهی اوقات می‌تواند منجر به مشکلات عملکردی شود. از تکنیک‌های مموایزیشن (memoization) (مانند `React.memo`، `useMemo`، `useCallback`) برای جلوگیری از رندرهای مجدد غیرضروری استفاده کنید.

بهترین شیوه‌ها برای حالت هم‌زمان

• استفاده از Suspense برای واکشی داده: همیشه از Suspense برای مدیریت حالت‌های بارگذاری هنگام واکشی داده استفاده کنید. این یک تجربه کاربری بهتر را فراهم می‌کند و به React اجازه می‌دهد وظایف دیگر را در اولویت قرار دهد.
• استفاده از Transitions برای به‌روزرسانی‌های غیرفوری: از Transitions برای علامت‌گذاری به‌روزرسانی‌هایی که فوری نیستند استفاده کنید. این به React اجازه می‌دهد ورودی کاربر و سایر وظایف مهم را در اولویت قرار دهد.
• مموایز کردن کامپوننت‌ها: از تکنیک‌های مموایزیشن برای جلوگیری از رندرهای مجدد غیرضروری استفاده کنید. این می‌تواند عملکرد را بهبود بخشد و میزان کاری را که React باید انجام دهد کاهش دهد.
• پروفایل کردن برنامه خود: از React DevTools Profiler برای تجزیه و تحلیل عملکرد برنامه خود و شناسایی گلوگاه‌های بالقوه استفاده کنید.
• تست کامل: برنامه خود را به طور کامل تست کنید تا اطمینان حاصل کنید که در حالت هم‌زمان به درستی کار می‌کند.
• اتخاذ تدریجی حالت هم‌زمان: سعی نکنید کل برنامه خود را به یکباره بازنویسی کنید. در عوض، با شروع از کامپوننت‌های کوچک و جدا شده، حالت هم‌زمان را به تدریج اتخاذ کنید.

آینده React و حالت هم‌زمان

حالت هم‌زمان فقط یک ویژگی نیست؛ بلکه یک تغییر اساسی در نحوه کار React است. این بنیاد ویژگی‌های آینده React مانند کامپوننت‌های سرور (Server Components) و رندرینگ خارج از صفحه (Offscreen Rendering) است. با ادامه تکامل React، حالت هم‌زمان برای ساخت برنامه‌های وب با کارایی بالا و کاربرپسند اهمیت فزاینده‌ای پیدا خواهد کرد.

کامپوننت‌های سرور، به طور خاص، نویدبخش هستند. آنها به شما امکان می‌دهند کامپوننت‌ها را روی سرور رندر کنید و میزان جاوا اسکریپتی را که باید در کلاینت دانلود و اجرا شود، کاهش دهید. این می‌تواند زمان بارگذاری اولیه برنامه شما را به طور قابل توجهی بهبود بخشد و عملکرد کلی را بهتر کند.

رندرینگ خارج از صفحه به شما امکان می‌دهد کامپوننت‌هایی را که در حال حاضر روی صفحه قابل مشاهده نیستند، پیش‌رندر کنید. این می‌تواند با ایجاد حس پاسخگویی بیشتر، عملکرد درک شده برنامه شما را بهبود بخشد.

نتیجه‌گیری

حالت هم‌زمان React یک ابزار قدرتمند برای ساخت برنامه‌های وب با کارایی بالا و پاسخگو است. با درک اصول اصلی حالت هم‌زمان و پیروی از بهترین شیوه‌ها، می‌توانید به طور قابل توجهی تجربه کاربری برنامه‌های خود را بهبود بخشیده و برای آینده توسعه React آماده شوید. در حالی که چالش‌هایی برای در نظر گرفتن وجود دارد، مزایای پاسخگویی بهبود یافته، تجربه کاربری پیشرفته و عملکرد بهتر، حالت هم‌زمان را به یک دارایی ارزشمند برای هر توسعه‌دهنده React تبدیل می‌کند. قدرت رندرینگ قابل‌وقفه را در آغوش بگیرید و پتانسیل کامل برنامه‌های React خود را برای مخاطبان جهانی آزاد کنید.